<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>修改元素内容及属性</title>
		<style>
			img {
				width: 300px;
				height: 300px;
			}
			.big {
				width: 500px;
				height: 500px;
			}
			.small {
				width: 100px;
				height: 100px;
			}
			
		</style>
	</head>
	<body>
		<button id="boy">男孩</button>
		<button id="girl">女孩</button>
		<img src="boy.png" alt="">
		<div>
			<p>
				默认显示的是男孩
			男孩很帅
			</p>
			</div>
		<script>
			var boyButton = document.querySelector('#boy');
			var girlButton = document.querySelector('#girl');
			var myImage = document.querySelector('img');
			var imageDesc = document.querySelector('p');
			boyButton.onclick = function(){
				myImage.src = 'boy.png';
				myImage.className = 'big';
				// imageDesc.innerText = '显示的是男孩';
				// imageDesc.innerHTML = '显示的是<strong>男孩</strong>';
				imageDesc.innerText = '显示的是<strong>男孩</strong>';
			}
			
			girlButton.onclick = function(){
				myImage.src = 'girl.png';
				myImage.className = 'small';
				// imageDesc.innerText = '显示的是女孩';
				// imageDesc.innerHTML = '显示的是<strong>女孩</strong>';
				imageDesc.innerText = '显示的是<strong>女孩</strong>';
			}
			
			/* 
			 innerText和innerHTML的区别
			 innerText会把所有的内容都当成一个普通的字符串，不识别html标签
			 会去掉空格和换行以及html标签
			 
			 innerHTML会把html标签渲染出来，会识别html标签
			 会保留所有的格式和标签
			 */
			
			var divDesc = document.querySelector('div');
			console.log(divDesc.innerText);
			console.log(divDesc.innerHTML);
		</script>
		
	</body>
</html>